<template lang="html">
  <div class="Index">
    <div class="mainView">
      <swiper :style='{height:contentHeight+"px"}' :options="swiperOption" ref="mySwiper">
        <swiperSlide class='s1'>

          <swiper :style='{height:contentHeight+"px"}' :options="insideSwiperOption" ref="insideSwiper">
            <swiperSlide class='insideSide'>
              <img src="../assets/images/index/banner1.jpg" :style='{width:outerWidth+"px"}' class='banner'>

              <div class="innerBox" :class='{active:insideSlideIndex == 0}'>
                <img src="../assets/images/index/banner1.png">
              </div>
            </swiperSlide>
            <swiperSlide class='insideSide'>
              <img src="../assets/images/index/banner2.jpg" :style='{width:outerWidth+"px"}' class='banner'>

              <div class="innerBox" :class='{active:insideSlideIndex == 1}'>
                <img src="../assets/images/index/banner2.png">
              </div>
            </swiperSlide>
            <swiperSlide class='insideSide'>
              <img src="../assets/images/index/banner3.jpg" :style='{width:outerWidth+"px"}' class='banner'>

              <div class="innerBox" :class='{active:insideSlideIndex == 2}'>
                <img src="../assets/images/index/banner3.png">
              </div>
            </swiperSlide>

            <div class="subPaginationBox">
              <div class="subPoint" v-for='(i,index) in 3' @click='subSlideTo(index)'>
                <div class="insideBorder" :class='{active:index == insideSlideIndex}'></div>
              </div>
              <div class="twoLine"></div>
            </div>
          </swiper>

        </swiperSlide>
        <swiperSlide class='s2'>
          <div class="slideBox2 clearfix">
            <div class="box2item">
              <div class="wrap">asdasd</div>
            </div>
            <div class="box2item">

            </div>
            <div class="box2item">

            </div>
            <div class="box2item">

            </div>
          </div>
        </swiperSlide>
        <swiperSlide class='s3'>
        </swiperSlide>
        <swiperSlide class='s4'>
        </swiperSlide>
        <swiperSlide class='s5'>
        </swiperSlide>
        <swiperSlide class='s6'>
        </swiperSlide>
      </swiper>

      <div class="paginationBox">
        <div class="paginationItem" @click='slideTo(index)' v-for='(i,index) in 6' :key='index' :class='{active:slideIndex == index}'>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {

  data () {
    return {
      swiperOption:{
        direction:'vertical',
        mousewheel:true,
        // allowTouchMove:false,
        nested:true, //用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。
        on:{
          init : ()=>{
            console.log('初始化完成');
          },
          slideChange: ()=>{
            this.slideIndex = this.mySwiper.activeIndex;
          },
          onSlideChangeStart() { //滑动父级需要激活滚轮事件
            this.enableMousewheelControl();
          }
        }
      },
      insideSwiperOption:{
        direction:'vertical',
        effect:'fade',
        autoplay:true,
        mousewheel:true,
        delay:5000,
        on:{
          slideChangeTransitionStart: ()=> {
            //此处禁止 外层 swiper
            this.mySwiper && this.mySwiper.mousewheel.disable();
          },
          slideChangeTransitionEnd: ()=> {
            this.mySwiper && this.mySwiper.mousewheel.enable();
          },
          slideChange: ()=>{
            this.insideSlideIndex = this.insideSwiper.activeIndex;
          }
        }
      },
      slideIndex:0,
      insideSlideIndex:null
    }
  },
  watch:{
    slideIndex(val){
      console.log(val)
    }
  },
  methods:{
    subSlideTo(index){
      this.insideSwiper.slideTo(index);
    },
    slideTo(index){
      this.mySwiper.slideTo(index);
    },
    tourl(url){
      tools.router.push({path:url})
    }
  },
  computed:{
    outerWidth(){
      return window.outerWidth;
    },
    contentHeight(){
      return window.innerHeight;
    },
    mySwiper(){
      return this.$refs.mySwiper.swiper;
    },
    insideSwiper(){
      return this.$refs.insideSwiper.swiper;
    }
  },
  mounted(){
    setTimeout( ()=>{
      this.insideSlideIndex = 0;
    },200)
  },
  components:{
    swiper,
    swiperSlide
  }
}
</script>

<style scoped lang='scss'>
@import '../assets/scss/tool.scss';
.Index{
  height: 100%;
  width: 100%;
  overflow: hidden;

  .s1{
    background: rgba(0,0,0,.2);
  }
  .s2{
    background: rgba(0,0,0,.3);
  }
  .s3{
    background: rgba(0,0,0,.4);
  }
  .s4{
    background: rgba(0,0,0,.5);
  }
  .s5{
    background: rgba(0,0,0,.6);
  }
  .s6{
    background: rgba(0,0,0,.7);
  }

  .mainView{

    .insideSide{
      position: relative;
      &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background:rgba(0,0,0,.3);
      }

      .innerBox{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate3d(-50%,-50%,0);
        transform: translate3d(-50%,-50%,0);
        z-index: 5000;

        img{
          transition: all 1s ease;
          @include transY(100px);
          opacity: .2;
        }

        &.active{
          img{
            @include transY(0);
            opacity: 1;
          }
        }
      }
    }

    .subPaginationBox{
      width: 260px;
      height: 26px;
      position: absolute;
      bottom: 35px;
      left: 50%;
      z-index:2000;
      @include transX(-50%);

      &:after{
        content: '';
        display: block;
        width: 2000px;
        height: 1px;
        position: absolute;
        top: 50%;
        left: -2000px;
        background: #fff;
      }

      &:before{
        content: '';
        display: block;
        width: 2000px;
        height: 1px;
        position: absolute;
        top: 50%;
        right: -2000px;
        background: #fff;
      }

      .twoLine{
        position: absolute;
        top: 0;
        left: 50%;
        width: 26px;
        height: 26px;
        @include transX(-50%);

        &:before{
          content: '';
          display: block;
          width: 76px;
          height: 1px;
          position: absolute;
          top: 50%;
          left: -82px;
          background: #fff;
        }

        &:after{
          content: '';
          display: block;
          width: 76px;
          height: 1px;
          position: absolute;
          top: 50%;
          right: -82px;
          background: #fff;
        }
      }
      .subPoint{
        width: 26px;
        height: 26px;
        margin: 0 auto;
        border-radius: 50%;
        @include hand;

        transition: all .3s ease;

        &:hover{
          -webkit-transform: scale(2);
          transform: scale(2);

          .insideBorder{
            &:after{
              background: #fff;
            }
          }
        }

        &:first-child{
          position: absolute;
          top: 0;
          left: 5px;
        }

        &:nth-child(3){
          position: absolute;
          top: 0;
          right: 5px;
        }

        &:nth-child(2){
          position: relative;
          z-index: 2000;
        }

        .insideBorder{
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 1px solid rgba(255,255,255,.5);
          position: relative;
          top: 5px;
          left: 5px;

          &.active{
            &:after{
              background: rgba(255,255,255,1);
            }
          }

          &:after{
            content: '';
            display: block;
            background: rgba(255,255,255,.5);
            width: 8px;
            height: 8px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
            transition: all .3s ease;
          }
        }

      }
    }

    .banner{
    }

    .paginationBox{
      width: 28px;
      height: 113px;
      position: fixed;
      top: 50%;
      left: 17px;
      @include transY(-50%);
      z-index: 100;

      .paginationItem{
        width: 14px;
        height: 14px;
        margin: 4px auto;
        display: block;
        background: #fff;
        border-radius: 50%;
        @include hand;
        -webkit-transform: scale(.4);
        transform: scale(.4);
        transition: transform .3s ease;

        &:hover{
          -webkit-transform: scale(.7);
          transform: scale(.7);
        }

        &.active{
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }
    }

    .slideBox2{
      width: 1200px;
      height: 100%;
      background: rgba(0,180,0,.5);
      margin: 0 auto;
      z-index: 10;
      



      .box2item{
        float: left;
        width: 300px;
        height: 100%;
        position: relative;
        
        &:hover{
          &:after{
            @include transY(0);
          }
        }

        &:after{
          content: '';
          transition: all .5s ease;
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          
          z-index: 10;
          @include transY(100%);
        }

        &:nth-child(1):after{
          background: #0163A5;
        }

        &:nth-child(2):after{
          background: #ACD146;
        }

        &:nth-child(3):after{
          background: #04AFA6;
        }

        &:nth-child(4):after{
          background: #F8C200;
        }

        .wrap{
          z-index: 100;
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          @include transY(-50%);
        }
      }
    }
  }
}
</style>
